<template>
  <div>
    <el-card>
      <div class="app-container">
        <el-tabs
          type="border-card"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="item in tabList"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          >
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
              label-width="68px"
            >
              <el-form-item label="">
                <el-select
                  v-model="queryParams.dsUserName"
                  placeholder="请输入打手名称"
                >
                  <el-option
                    v-for="item in BatterList"
                    :key="item.id"
                    :label="item.dictValue"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="no">
                <el-input
                  v-model="queryParams.no"
                  placeholder="请输入订单号"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="userTel">
                <el-input
                  v-model="queryParams.userTel"
                  placeholder="请输入联系方式"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="resource">
                <el-select
                  v-model="queryParams.resource"
                  placeholder="请选择渠道来源"
                >
                  <el-option
                    v-for="item in channelList"
                    :key="item.id"
                    :label="item.dictValue"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="wwUserName">
                <el-input
                  v-model="queryParams.wwUserName"
                  placeholder="请输入旺旺号"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="groupName">
                <el-input
                  v-model="queryParams.groupName"
                  placeholder="请输入大区"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="baoXian">
                <el-input
                  v-model="queryParams.baoXian"
                  placeholder="请输入保险"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="roleUserName">
                <el-input
                  v-model="queryParams.roleUserName"
                  placeholder="请输入角色名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="workInfo">
                <el-input
                  v-model="queryParams.workInfo"
                  placeholder="请输入代练内容"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="dsUserName">
                <el-input
                  v-model="queryParams.dsUserName"
                  placeholder="请输入打手名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="dsTel">
                <el-input
                  v-model="queryParams.dsTel"
                  placeholder="请输入打手联系方式"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="" prop="dsRemark">
                <el-input
                  v-model="queryParams.dsRemark"
                  placeholder="请输入打手备注"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>

              <el-form-item label="" prop="userTel">
                <el-date-picker
                  style="width: 300px"
                  v-model="timer"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="handleAdd"
                  v-hasPermi="['dsOrder:order:add']"
                  >创建订单</el-button
                >
                <!-- <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  :disabled="single"
                  @click="handleUpdate"
                  v-hasPermi="['dsOrder:order:edit']"
                  >修改</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-delete"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['dsOrder:order:remove']"
                  >删除</el-button
                > -->
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-download"
                  @click="handleExport"
                  v-hasPermi="['dsOrder:order:export']"
                  >导出</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  v-clipboard:copy="copyVlaue"
                  v-clipboard:error="onError"
                  v-clipboard:success="onCopy"
                  @click="keyCopy"
                  >复制订单空文本</el-button
                >
              </el-form-item>
            </el-form>

            <el-table
              v-loading="loading"
              :data="orderList"
              @selection-change="handleSelectionChange"
              :header-cell-style="{
                backgroundColor: '#666fe8',
                color: 'white',
              }"
              :row-class-name="tableRowClassName"
            >
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column
                label="订单号"
                align="center"
                prop="no"
                width="200px"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="联系方式"
                align="center"
                prop="userTel"
                width="120px"
              />
              <el-table-column
                label="渠道来源"
                align="center"
                prop="resource"
                width="120px"
              />
              <el-table-column
                label="旺旺号"
                align="center"
                prop="wwUserName"
                width="160px"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="大区"
                align="center"
                prop="groupName"
                width="100px"
              />
              <el-table-column label="保险" align="center" prop="baoXian" />
              <el-table-column
                label="角色名称"
                align="center"
                prop="roleUserName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="代练内容"
                align="center"
                prop="workInfo"
                width="120px"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="下单金额" align="center" prop="price" />
              <el-table-column label="打手结算" align="center" prop="dsPrice" />
              <el-table-column
                label="打手名称"
                align="center"
                prop="dsUserName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="打手联系方式"
                align="center"
                prop="dsTel"
                width="120px"
                :show-overflow-tooltip="true"
              />
              <!-- <el-table-column
        label="订单状态"
        align="center"
        prop="status"
        :formatter="formatStatus"
        fixed="right"
      >
      </el-table-column> -->
              <el-table-column
                label="订单状态"
                align="center"
                prop="status"
                fixed="right"
              >
                <template #default="{ row }">
                  <span :style="{ color: getStatusColor(row.status) }">
                    {{ getStatusText(row.status) }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                label="打手备注"
                align="center"
                prop="dsRemark"
                width="200px"
                :show-overflow-tooltip="true"
              />

              <el-table-column
                label="订单备注"
                align="center"
                prop="remark"
                width="200px"
                :show-overflow-tooltip="true"
              />

              <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="150px"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['dsOrder:order:edit']"
                    style="color: #f6be24"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['dsOrder:order:remove']"
                    style="color: #7fd081"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
        </el-tabs>

        <!-- 添加或修改代练订单对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="1200px"
          append-to-body
          text-align:
          center
        >
          <el-form
            ref="ruleform"
            :inline="true"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-divider content-position="left">打手信息</el-divider>

            <!-- <el-form-item label="分配打手" prop="dsUserName">
              <el-input
                v-model="form.dsUserName"
                placeholder="请输入打手名称"
                style="width: 222px"
                autocomplete="off"
              />
            </el-form-item> -->
            <el-form-item label="分配打手" prop="dsUserName">
              <el-select
                @change="changefn"
                v-model="form.dsUserName"
                placeholder="请选择打手"
              >
                <el-option
                  v-for="item in dsaALllist"
                  :key="item.id"
                  :label="item.dsUserName"
                  :value="item.dsUserName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="打手联系方式" prop="dsTel">
              <el-input
                v-model="form.dsTel"
                placeholder="请输入微信/QQ/手机号"
                style="width: 222px"
                autocomplete="off"
              />
              <span style="margin-left: 21px; color: red" v-if="dsWork"
                >打手在线时间：{{ dsWork }}</span
              >
            </el-form-item>
            <br />
            <el-form-item label="打手备注" prop=" dsRemark">
              <el-input
                v-model="form.dsRemark"
                placeholder="请输入打手备注"
                style="width: 500px"
                type="textarea"
              />
            </el-form-item>
            <el-divider content-position="left">订单信息</el-divider>
            <el-form-item label="渠道来源" prop="resource">
              <el-select v-model="form.resource" placeholder="请选择渠道来源">
                <el-option
                  v-for="item in channelList"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单号" prop="no">
              <el-input
                v-model="form.no"
                placeholder="请输入订单号"
                style="width: 222px"
              />
            </el-form-item>
            <el-form-item label="用户联系方式" prop="userTel">
              <el-input
                v-model="form.userTel"
                placeholder="请输入微信/QQ/手机号"
                style="width: 222px"
              />
            </el-form-item>
            <el-form-item label="旺旺号" prop="wwUserName">
              <el-input
                v-model="form.wwUserName"
                placeholder="请输入旺旺号"
                style="width: 222px"
              />
            </el-form-item>

            <el-form-item label="大区" prop="groupName">
              <el-select
                v-model="form.groupName"
                placeholder="请选择大区"
                style="width: 222px"
              >
                <el-option
                  v-for="(item, index) in RegionList"
                  :key="index"
                  :label="item.dictValue"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="保险" prop="baoXian">
              <el-input
                v-model="form.baoXian"
                placeholder="请输入保险"
                style="width: 222px"
              />
            </el-form-item>
            <el-form-item label="角色名称" prop="roleUserName">
              <el-input
                v-model="form.roleUserName"
                placeholder="请输入角色名称"
                style="width: 222px"
              />
            </el-form-item>
            <el-form-item label="代练内容" prop="workInfo">
              <el-input
                v-model="form.workInfo"
                placeholder="请输入代练内容"
                style="width: 222px"
              />
            </el-form-item>
            <el-form-item label="下单金额" prop="price">
              <el-input
                v-model="form.price"
                type="number"
                placeholder="请输入下单金额"
                style="width: 222px"
                :min="0"
                oninput="value=value.replace(/[^0-9]/g,'')"
              />
            </el-form-item>
            <el-form-item label="打手结算" prop="dsPrice">
              <el-input
                v-model.number="form.dsPrice"
                type="number"
                placeholder="请输入打手结算"
                style="width: 222px"
                :min="0"
                oninput="value=value.replace(/[^0-9]/g,'')"
              />
            </el-form-item>

            <br />
            <el-form-item label="订单备注" prop=" remark">
              <div style="display: flex">
                <div>
                  <el-input
                    v-model="form.remark"
                    placeholder="请输入订单备注"
                    style="width: 500px"
                    type="textarea"
                    :rows="5"
                  />
                </div>
                <div style="margin-left: 12px">
                  <el-button type="primary" @click="kuaisushibie"
                    >快速识别</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <br />
            <el-form-item label="订单状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">未开始</el-radio>
                <el-radio :label="1">代练中</el-radio>
                <el-radio :label="2">已完成</el-radio>
                <el-radio :label="3">已结算</el-radio>
                <el-radio :label="4">已退款</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  listOrder,
  getOrder,
  delOrder,
  addOrder,
  updateOrder,
} from "@/api/dsOrder/order";
import { listInfoAll } from "@/api/ds/info";
import { getDicts } from "@/api/system/dict/data";
var phoneCheck = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("手机号不能为空"));
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error("手机号格式不正确"));
  } else {
    callback();
  }
};
export default {
  name: "Order",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 代练订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createId: null,
        no: null,
        userTel: null,
        wwUserName: null,
        groupName: null,
        baoXian: null,
        roleUserName: null,
        workInfo: null,
        price: null,
        dsPrice: null,
        dsUserId: null,
        dsUserName: null,
        dsTel: null,
        dsUserId: null,
        status: null,
        del: null,
        resource: null,
        remark: null,
        dsRemark: null,
      },
      // 表单参数1
      form: {},
      // 表单校验
      rules: {
        // dsTel: [
        //   { required: true, trigger: "blur", message: "请输入微信/QQ/手机号" },
        // ],
        userTel: [
          { required: true, trigger: "blur", message: "请输入微信/QQ/手机号" },
        ],
        no: [{ required: true, trigger: "change", message: "请输入订单号" }],
        groupName: [{ required: true, trigger: "blur", message: "请选择大区" }],
        baoXian: [{ required: true, trigger: "change", message: "请输入保险" }],
        roleUserName: [
          { required: true, trigger: "blur", message: "请输入角色名称" },
        ],
        // workInfo: [
        //   { required: true, trigger: "change", message: "请输入代练内容" },
        // ],
        price: [
          { required: true, trigger: "change", message: "请输入下单金额" },
        ],
        resource: [
          { required: true, trigger: "blur", message: "请选择渠道来源" },
        ],
        status: [
          { required: true, trigger: "blur", message: "请选择订单状态" },
        ],
      },
      tabList: [
        { name: "全部", id: "6" },
        { name: "未开始", id: "0" },
        { name: "代练中", id: "1" },
        { name: "已完成", id: "2" },
        { name: "已结算", id: "3" },
        { name: "已退款", id: "4" },
      ],
      activeName: "6",
      RegionList: [],
      BatterList: [],
      timer: [],
      channelList: [],
      dsaALllist: [],
      dsWork: null,
      copyVlaue: "",
      remarkList: [],
    };
  },
  created() {
    if (this.activeName == 6) {
      this.queryParams.status = null;
      this.getList();
    } else {
      this.getList();
    }

    this.getRegionList();
    this.getBatterList();
    this.getchanelList();
    this.getListds();
  },
  methods: {
    // 处理字符串
    processData(str) {
      const lines = str.split("\n");
      const result = [];

      for (const line of lines) {
        // 使用正则表达式匹配中文键名和值
        const match = line.match(/^([^：]+)：(.+)$/);
        if (match) {
          const key = match[1].trim();
          const value = match[2].trim();
          result.push({ name: key, value: value });
        }
      }
      return result;
    },
    //快速识别
    kuaisushibie() {
      if (!this.form.remark) return;
      const arr = this.processData(this.form.remark);
      arr.forEach((item) => {
        if (item.name == "购买订单号" && item.value) {
          this.form.no = item.value;
        }
        if (item.name == "联系手机" && item.value) {
          this.form.userTel = item.value;
        }
        if (item.name == "大区【QQ/微信/登录】" && item.value) {
          this.form.groupName = item.value;
        }
        if (item.name == "保险【几个保险】" && item.value) {
          this.form.baoXian = item.value;
        }
        if (item.name == "角色名字【必填】" && item.value) {
          this.form.roleUserName = item.value;
        }
        if (item.name == "代练内容【哈夫币数量】" && item.value) {
          this.form.workInfo = item.value;
        }
      });
    },
    // 复制商品信息
    keyCopy(item) {
      this.copyVlaue = `需要2个设备扫码登录
麻烦亲把这个表格整个复制，填写完成后发给我哦
购买订单号：
联系手机：
大区【QQ/微信/登录】：
保险【几个保险】：
角色名字【必填】：
代练内容【哈夫币数量】：
郑重声明：虚拟产品，未满18周岁的需要在监护人允许下购买，否则请勿下单！
`;
    },
    // 复制成功和失败的方法
    onCopy(e) {
      this.$modal.msgSuccess("复制成功");
      this.copyVlaue = "";
    },
    onError() {
      this.$modal.msgError("复制失败");
      this.copyVlaue = "";
    },
    /** 查询打手列表 */
    getListds() {
      this.loading = true;
      listInfoAll().then((response) => {
        this.dsaALllist = response.rows;
        this.loading = false;
      });
    },
    changefn(e) {
      const arr = this.dsaALllist.filter((item) => item.dsUserName == e);
      console.log("arr", arr);
      if (arr && arr.length != 0) {
        this.form.dsUserId = arr[0].dsUserId;
        this.form.dsTel = arr[0].dsUserTel;
        this.dsWork = arr[0].dsWork;
      }
    },
    //获取渠道
    async getchanelList() {
      const res = await getDicts("orderchannel");
      console.log("res", res);
      this.channelList = res.data;
    },
    //获取区服
    async getRegionList() {
      const res = await getDicts("region");
      console.log("res", res);
      this.RegionList = res.data;
    },
    //获取打手
    async getBatterList() {
      const res = await getDicts("batter");
      console.log("res", res);
      this.BatterList = res.data;
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == 6) {
        this.queryParams.status = null;
        this.queryParams.pageNum = 1;
        this.getList();
      } else {
        this.queryParams.status = tab.name;
        this.queryParams.pageNum = 1;
        this.getList();
      }
    },
    getStatusText(status) {
      const map = {
        0: "未开始",
        1: "代练中",
        2: "已完成",
        3: "已结算",
        4: "已退款",
      };
      return map[status] || "未知";
    },
    getStatusColor(status) {
      const map = {
        0: "#f6be24", // 黄色
        1: "#7e86eb", // 蓝色
        2: "#7fd081", // 灰色
        3: "#7fd081", // 绿色
        4: "#dc5a6a", // 红色
      };
      return map[status] || "#000";
    },
    /** 查询代练订单列表 */
    getList() {
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.startTime = this.timer[0] + " 00:00:00";
        this.queryParams.endTime = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
      listOrder(this.queryParams).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createId: null,
        createTime: null,
        no: null,
        userTel: null,
        wwUserName: null,
        groupName: null,
        baoXian: null,
        roleUserName: null,
        workInfo: null,
        price: null,
        dsPrice: null,
        dsUserId: null,
        dsUserName: null,
        dsTel: null,
        status: null,
        del: null,
        resource: null,
        remark: null,
        dsRemark: null,
      };
      this.dsWork = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        createId: null,
        no: null,
        userTel: null,
        wwUserName: null,
        groupName: null,
        baoXian: null,
        roleUserName: null,
        workInfo: null,
        price: null,
        dsPrice: null,
        dsUserId: null,
        dsUserName: null,
        dsTel: null,
        status: this.queryParams.status,
        del: null,
        resource: null,
        remark: null,
        dsRemark: null,
      };
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "创建订单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getOrder(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改订单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.ruleform.validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateOrder(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除代练订单编号为"' + ids + '"的数据项？')
        .then(function () {
          return delOrder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "dsOrder/order/export",
        {
          ...this.queryParams,
        },
        `order_${new Date().getTime()}.xlsx`
      );
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log('333', row, rowIndex);
      // for (let i = 0; i < this.orderList.length; i++) {
      //   if (row.id === this.orderList[i].id) {
      //     return "xuanzhong-row";
      //   }
      // }

      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-button.el-button--primary {
  background-color: #666fe8;
  border: none;
  color: #fff;
}

::v-deep .el-tabs__item.is-top.is-active {
  background-color: #666fe8;
  border: none;
  color: #fff;
}

::v-deep .el-dialog__header {
  background-color: #666fe8;
  border: none;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__close.el-icon.el-icon-close {
    color: #fff;
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #666fe8;
  border-color: #fff;
}

::v-deep .el-table__header {
  background-color: #666fe8 !important;
  border: none;
  color: #fff;
}
</style>
<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: #f4f5fa;
}
::v-deep .el-table .success-row {
  background: #fff;
}

::v-deep .el-table .xuanzhong-row {
  color: #3f9eff;
}

.topNav {
  background-color: #3f9eff;
}

.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  // margin: 6px 0;
}

::v-deep .caozuo_item {
  overflow-x: auto !important;
  width: 300px;
}

#qrCode {
  display: inline-block;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
  top: 15%;

  /* img: {
    width: 200px;
    height: 200px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  } */
}

.search-form-new ::v-deep .el-input {
  width: 200px !important;
}

.weishouAll {
  margin-left: 10px;
  .el-dropdown-link {
    cursor: pointer;
    color: red;
  }
  .el-icon-arrow-down {
    font-size: 12px;
    color: red;
  }
}

.sign {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ffcc66;
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  margin-right: 5px;

  &.ping {
    background-color: #1890ff;
  }
}

// .tuisongbtn ::v-deep .el-dropdown-menu {
//   max-height: 600px;
//   overflow-y: hidden;
// }

.zhuangtai {
  width: 66px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  background-color: rgba(247, 181, 0, 0.1);
  color: #f7b500;
  border-radius: 5px;
  margin-left: 6px;
}

::v-deep .el-table {
  border-radius: 10px;
  .el-table__row {
    height: 30px !important;
    .cell {
      height: 26px;
      line-height: 26px;
    }
  }

  .el-table__cell {
    padding: 10px 0 !important;
  }
}

::v-deep .el-tabs__nav-scroll {
  border-bottom: none !important;
  // border: 1px dashed #919191;
}

::v-deep .kkk {
  background-color: #f0f0f0;
}

// .app-container {
//   background-color: #f0f0f0;
// }

::v-deep .el-step__head {
  display: none;
}
</style>
